<template>
    <view
        :class="{
            'input-number': true,
        }"
    >
        <text @click="down" class="icon iconfont icon-minus"></text>
        <text class="uni-input">{{ value }}</text>
        <!-- <input class="uni-input" :value="value" focus placeholder="" /> -->
        <text @click="up" class="icon iconfont icon-plus"></text>
    </view>
</template>

<script>

export default {
    // model: {
    //     prop: 'value',
    //     event: 'change'
    // },
    components: {
    },
    props: {
        value: {
            'type': Number,
            'default': 1
        },
        max: {
            'type': Number,
            'default': 99
        },
        min: {
            'type': Number,
            'default': 1
        },
    },
    data() {
        return {

        };
    },

    methods: {
        down() {
            if (+this.value <= +this.min) {
                return;
            }
            this.$emit('change', this.value - 1);
        },
        up() {

            if (+this.value >= +this.max) {
                return;
            }
            console.log(this.value + 1, 11)
            this.$emit('change', this.value + 1);
        }
    }
}
</script>

<style lang="stylus" scoped>
.input-number
    display flex
    align-items center

    .iconfont
        background #ededed
        border-radius 8rpx
        height 40rpx
        width 40rpx
        font-size 24rpx
        display flex
        align-items center
        justify-content center
        color #666
        position relative
        overflow visible

    .uni-input
        width 48rpx
        text-align center
        margin 0 4rpx
        font-size 28rpx
        font-weight 500
</style>
